import React from "react";
import { Table, Switch, message } from 'antd';
import { timeToStr } from '../../../../../utils/time'
import api from "../../../../../api";


const MessageTable = (props: any) => {
    const columns = [
        {
            title: '序号',
            dataIndex: 'number',
            key: 'number',
        },
        {
            title: '文章标题',
            dataIndex: 'title',
            key: 'title',
        },
        {
            title: '创建人',
            dataIndex: 'name',
            key: 'name',
        },
        {
            title: '创建日期',
            dataIndex: 'create_time',
            key: 'create_time',
            render: (time: any) => {
                return <span>{timeToStr(time)}</span>
            }
        },
        {
            title: '状态',
            dataIndex: 'state',
            key: 'state',
            render: (state: any, item: any) => {
                return <Switch checkedChildren="开启" unCheckedChildren="关闭" checked={state} onChange={() => { stateChange(item) }} />
            }
        },
        {
            title: '操作',
            key: "option",
            render: (text: any, item: any) => {
                return <div className="option-message">
                    <span onClick={() => {edit(item) }}>编辑</span>
                    <span onClick={() => { del(item.id) }}>删除</span>
                </div>
            }
        },
    ];
    // 方法
    // 状态切换
    const stateChange = (item: any) => {
        api.messageChange({
            id: item.id,
            state: !item.state
        }).then((res: any) => {
            if (res.success) {
                message.success('修改成功');
                // 重新渲染页面
                props.getMessageList();
            } else {
                message.error(res.message);
            }
        })
    };
    // 点击删除
    const del = (id: string) => {
        // 把id传递给父组件的删除方法
        props.delMessage(id)
    }
    // 点击编辑
    const edit = (item: any) => {
        props.editMessage(item)
    };
    return (
        <>
            {props.dataSource[0] && <Table dataSource={props.dataSource} columns={columns} rowKey={record => record.id}
                pagination={false}
            />}
        </>

    )
};

export default MessageTable